<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  statsDetail: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>
<template>
  <div class="stat-info">
    <ul class="flex space-x-2">
      <li>{{ statsDetail.framesPerSecond }}</li>
      <li>
        {{
          statsDetail.frameSize ||
          `${statsDetail.frameWidth || 0} x ${statsDetail.frameHeight || 0}`
        }}
      </li>
      <!-- <li>framesReceived: {{ statsDetail.framesReceived }}</li>
      <li>framesDecoded: {{ statsDetail.framesDecoded }}</li>
      <li>jitter: {{ statsDetail.jitter }}</li>
      <li>jitterBufferDelay: {{ statsDetail.jitterBufferDelay }}</li>
      <li>packetsLost: {{ statsDetail.packetsLost }}</li>
      <li>packetsReceived：{{ statsDetail.packetsReceived }}</li>
      <li>totalDecodeTime: {{ statsDetail.totalDecodeTime }}</li>
      <li>mouse-x-y: {{ statsDetail.offsetX }} - {{ statsDetail.offsetY }}</li>
      <li>broadKey: {{ statsDetail.broadKey }}</li> -->
    </ul>
  </div>
</template>
<style scoped lang="scss">
.stat-info {
  position: fixed;
  right: 0;
  top: 0;
  color: #fff;
  z-index: 1000;
  pointer-events: none;
  padding: 4px;
  font-size: 12px;
  font-weight: bold;
  li {
    line-height: 30px;
  }
}
</style>
